<template>
  <div class="main-box scroll">
    <div class="table-box">
      <el-tabs v-model="activeName" tab-position="bottom" class="demo-tabs">
        <el-tab-pane label="云平台资源监控" name="cloud">
          <ProTable
            v-if="activeName === 'cloud'"
            ref="proTable"
            title="云平台资源监控"
            highlight-current-row
            :columns="cloudColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
            <template #resource_name="scope">
              <el-button type="primary" link @click="openDialog('detailRef', scope.row.id)">{{
                scope.row.ticket_type
              }}</el-button>
            </template>
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="网络资源监控" name="net">
          <ProTable
            v-if="activeName === 'net'"
            ref="proTable"
            title="网络资源监控"
            highlight-current-row
            :columns="netColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
            <template #resource_name="scope">
              <el-button type="primary" link>{{ scope.row.ticket_type }}</el-button>
            </template>
          </ProTable>
        </el-tab-pane>
        <el-tab-pane label="安全资源监控" name="security">
          <ProTable
            v-if="activeName === 'security'"
            ref="proTable"
            title="安全资源监控"
            highlight-current-row
            :columns="securityColumns"
            :request-api="getTableList"
            :pagination="true"
            :show-summary="false"
            :init-param="initParam"
            :indent="20"
            :search-col="{ xs: 1, sm: 1, md: 2, lg: 4, xl: 4 }"
          >
            <template #resource_name="scope">
              <el-button type="primary" link>{{ scope.row.ticket_type }}</el-button>
            </template>
          </ProTable>
        </el-tab-pane>
      </el-tabs>
      <modalDetail ref="detailRef" />
    </div>
  </div>
</template>

<script setup lang="tsx" name="resource_monitor">
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { reactive, ref } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { getTicketList, getTicketTypes } from "@/api/modules/monitorManagement/operationManagement";
import modalDetail from "./component/modal_detail.vue";
import modalAddOrEdit from "@/views/businessManagement/business_config/component/modal_add_or_edit.vue";
// ProTable 实例
const activeName = ref("cloud");
const proTable = ref<ProTableInstance>();
// 列表API
const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.created_time && (newParams.start_time = newParams.created_time[0]);
  newParams.created_time && (newParams.end_time = newParams.created_time[1]);
  delete newParams.created_time;
  switch (activeName.value) {
    case "cloud":
      return getTicketList(newParams);
      break;
    case "net":
      return getTicketList(newParams);
      break;
    default:
      return getTicketList(newParams);
  }
};
const options = [
  {
    value: "xnjzch",
    label: "虚拟机资源",
    children: [
      {
        value: "xnj",
        label: "虚拟机"
      },
      {
        value: "yyp",
        label: "云硬盘"
      },
      {
        value: "ljsfwq",
        label: "裸金属服务器"
      }
    ]
  },
  {
    value: "sbzc",
    label: "设备资产",
    children: []
  },
  {
    value: "yyfw",
    label: "应用服务",
    children: []
  },
  {
    value: "qtzy",
    label: "其他资源",
    children: []
  }
];
const typeValue = ref(["xnjzch", "xnj"]);
// 表格配置项
const cloudColumns = reactive<ColumnProps<any>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "monthyTicket",
    label: "类型",
    isShow: false,
    search: {
      el: "select",
      render: () => {
        return <el-cascader options={options} v-model={typeValue.value} clearable />;
      }
    }
  },
  {
    prop: "resource_name",
    label: "资源名称",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "todayTicket", label: "资源状态", minWidth: 100 },
  { prop: "monthyTicket", label: "告警状态", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "IP地址",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "monthyTicket", label: "资源唯一标识", minWidth: 120 },
  {
    prop: "monthyTicket",
    label: "系统类型",
    minWidth: 100
  },
  { prop: "monthyTicket", label: "系统名称", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "数据中心",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  {
    prop: "monthyTicket",
    label: "所属网域",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  { prop: "created_time", label: "最后修改时间", width: 200 },
  { prop: "monthyTicket", label: "内存使用率", minWidth: 110 },
  { prop: "monthyTicket", label: "网络流出速率", minWidth: 120 },
  { prop: "monthyTicket", label: "云硬盘使用率", minWidth: 120 },
  { prop: "monthyTicket", label: "CPU使用率", minWidth: 110 },
  { prop: "monthyTicket", label: "磁盘写操作速率", minWidth: 130 },
  { prop: "monthyTicket", label: "磁盘写速率", minWidth: 110 },
  { prop: "monthyTicket", label: "磁盘读速率", minWidth: 110 },
  { prop: "monthyTicket", label: "磁盘使用率", minWidth: 110 },
  { prop: "monthyTicket", label: "用户空间CPU使用率", minWidth: 160 },
  { prop: "monthyTicket", label: "已用容量-有效容量", minWidth: 140 },
  { prop: "monthyTicket", label: "总容量-有效容量", minWidth: 130 },
  { prop: "monthyTicket", label: "5分钟系统平均负载", minWidth: 130 },
  { prop: "monthyTicket", label: "文件系统已用空间", minWidth: 130 },
  { prop: "monthyTicket", label: "文件系统空闲空间", minWidth: 130 }
]);
const netColumns = reactive<ColumnProps<any>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "type",
    label: "类型",
    isShow: false,
    search: {
      el: "select",
      render: () => {
        return <el-cascader options={options} v-model={typeValue.value} clearable />;
      }
    }
  },
  {
    prop: "resource_name",
    label: "资源名称",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "todayTicket", label: "资源状态", minWidth: 100 },
  { prop: "monthyTicket", label: "告警状态", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "IP地址",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "monthyTicket", label: "资源唯一标识", minWidth: 120 },
  {
    prop: "monthyTicket",
    label: "系统类型",
    minWidth: 100
  },
  { prop: "monthyTicket", label: "系统名称", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "数据中心",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  {
    prop: "monthyTicket",
    label: "所属网域",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  { prop: "created_time", label: "最后修改时间", width: 200 },
  { prop: "monthyTicket", label: "出网带宽使用率", minWidth: 140 },
  { prop: "monthyTicket", label: "下行带宽", minWidth: 100 },
  { prop: "monthyTicket", label: "上行带宽", minWidth: 100 },
  { prop: "monthyTicket", label: "网络流入速率", minWidth: 130 },
  { prop: "monthyTicket", label: "网络流出速率", minWidth: 130 },
  { prop: "monthyTicket", label: "流出字节速率", minWidth: 130 },
  { prop: "monthyTicket", label: "流入字节速率", minWidth: 130 },
  { prop: "monthyTicket", label: "响应时间", minWidth: 100 },
  { prop: "monthyTicket", label: "平均内存利用率", minWidth: 140 },
  { prop: "monthyTicket", label: "平均CPU利用率", minWidth: 140 },
  { prop: "monthyTicket", label: "发送包速率", minWidth: 110 },
  { prop: "monthyTicket", label: "接收包速率", minWidth: 110 },
  { prop: "monthyTicket", label: "流入带宽利用率", minWidth: 140 },
  { prop: "monthyTicket", label: "光模块接收功率", minWidth: 140 },
  { prop: "monthyTicket", label: "光模块发送功率", minWidth: 140 },
  { prop: "monthyTicket", label: "CPU利用率", minWidth: 110 },
  { prop: "monthyTicket", label: "内存利用率", minWidth: 110 }
]);
const securityColumns = reactive<ColumnProps<any>[]>([
  { type: "index", label: "#", width: 80 },
  {
    prop: "monthyTicket",
    label: "系统类型",
    isShow: false,
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    }
  },
  {
    prop: "monthyTicket",
    label: "类型",
    isShow: false,
    search: {
      el: "select",
      render: () => {
        return <el-cascader options={options} v-model={typeValue.value} clearable />;
      }
    }
  },
  {
    prop: "resource_name",
    label: "资源名称",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "todayTicket", label: "资源状态", minWidth: 100 },
  { prop: "monthyTicket", label: "告警状态", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "IP地址",
    search: {
      el: "input"
    },
    minWidth: 100
  },
  { prop: "monthyTicket", label: "资源唯一标识", minWidth: 120 },
  {
    prop: "monthyTicket",
    label: "系统类型",
    minWidth: 100
  },
  { prop: "monthyTicket", label: "系统名称", minWidth: 100 },
  {
    prop: "monthyTicket",
    label: "数据中心",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  {
    prop: "monthyTicket",
    label: "所属网域",
    search: {
      el: "select"
    },
    enum: async () => {
      let { data } = await getTicketTypes();
      const arr = data.map(item => {
        return {
          label: item,
          value: item
        };
      });
      return { data: arr };
    },
    minWidth: 100
  },
  { prop: "created_time", label: "最后修改时间", width: 200 },
  { prop: "monthyTicket", label: "发送速率", minWidth: 110 },
  { prop: "monthyTicket", label: "接收速率", minWidth: 120 },
  { prop: "monthyTicket", label: "处理速率", minWidth: 120 },
  { prop: "monthyTicket", label: "ES入库速率", minWidth: 110 },
  { prop: "monthyTicket", label: "HIVE入库速率", minWidth: 130 },
  { prop: "monthyTicket", label: "转发速率EPS", minWidth: 110 },
  { prop: "monthyTicket", label: "采集速率EPS", minWidth: 110 },
  { prop: "monthyTicket", label: "告警数", minWidth: 130 },
  { prop: "monthyTicket", label: "是否失陷", minWidth: 130 },
  { prop: "monthyTicket", label: "风险等级", minWidth: 130 },
  { prop: "monthyTicket", label: "漏洞数", minWidth: 130 },
  { prop: "monthyTicket", label: "配置核查数", minWidth: 130 },
  { prop: "monthyTicket", label: "弱口令数", minWidth: 130 },
  { prop: "monthyTicket", label: "CPU使用率", minWidth: 130 },
  { prop: "monthyTicket", label: "内存使用率", minWidth: 130 },
  { prop: "monthyTicket", label: "磁盘使用率", minWidth: 130 },
  { prop: "monthyTicket", label: "安全事件数", minWidth: 130 }
]);
// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({});
// 查看详情
const detailRef = ref<InstanceType<typeof modalAddOrEdit> | null>(null);
const openDialog = (ref: string, id) => {
  if (ref == "detailRef") detailRef.value?.openDialog(id);
};
</script>

<style lang="scss" scoped>
@import "index";
.main-box {
  flex-direction: row;
  height: 100%;
  :deep(.table-box) {
    .el-tabs__header {
      padding: 10px 18px;
      padding-bottom: 0;
      margin-top: 0;
    }
  }
  &-left {
    display: flex;
    width: 250px;
    margin-right: 10px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 0 8px 0 #e6e6e6;
  }
  &-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
  }
}
</style>
